<template>
  <div style="width: 100%; height: 90%; background: white; margin: 0 auto; overflow: auto;">
    <el-row style="height: 100%;">
      <el-col :span="4">
        <div class="gdap-colleage-avatar">
          <img
            :src="colleageAvatar"
            class="gdap-colleage-avatar-img"
            onerror="this.src='http://222.82.250.217:81/nceeSysMgr/xiaohui.png'"
          >
          <div
            style="height: 60px;width: 100%; line-height: 60px; color: #444; font-size: 30px; text-indent: 20px;"
          ></div>
        </div>

        <div>
          <el-menu default-active="1" class="el-menu-vertical-demo">
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span>
                <a href="#lqgl" style="text-decoration: none;color: #999;">录取概率</a>
              </span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-setting" style="color:#409EFF"></i>
              <span>
                <a href="#zsjh" style="text-decoration: none;color: #999;">招生计划</a>
              </span>
            </el-menu-item>
            <!-- 数据不支持，暂不使用 2019-04-18 -->
            <!--            <el-menu-item index="3">-->
            <!--              <i class="el-icon-menu"></i>-->
            <!--              <span>考生成绩</span>-->
            <!--            </el-menu-item>-->
            <!--            <el-menu-item index="4">-->
            <!--              <i class="el-icon-menu"></i>-->
            <!--              <span>考生来源</span>-->
            <!--            </el-menu-item>-->
            <!--            <el-menu-item index="5">-->
            <!--              <i class="el-icon-menu"></i>-->
            <!--              <span>分数线</span>-->
            <!--            </el-menu-item>-->
            <el-menu-item index="6" v-if="yxPinggu">
              <i class="el-icon-menu" style="color:#409EFF"></i>
              <span>
                <a href="#yxPinggu" style="text-decoration: none;color: #999;">优势学科</a>
              </span>
            </el-menu-item>
            <!-- 入口改为首页 2019-04-18 -->
            <!--            <el-menu-item index="7">-->
            <!--              <i class="el-icon-menu"></i>-->
            <!--              <span>预测录取</span>-->
            <!--            </el-menu-item>-->
            <el-menu-item>
              <i class="el-icon-back" style="color:#409EFF"></i>
              <span v-on:click="back" style="color: #999;">返回上一页</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <el-col
        :span="20"
        style="position: absolute; right: 0; height: 100%; overflow-y: auto; overflow-x: hidden;"
      >
        <div
          style="width: 100%; height: 60px; padding: 0; margin: 0; line-height: 60px;text-align:center"
        >
          <span style="font-size: 40px; font-weight: 500;color:#000;">{{colleageName}}</span>
        </div>

        <div style="border-left: 4px solid rgb(255, 178,37);">
          <h3 id="lqgl" style="margin-left: 1%;">
            录取概率
            <el-progress :text-inside="lqPercentage" :stroke-width="20" :percentage="lqPercentage"></el-progress>
          </h3>
        </div>
        <div style="border-left: 4px solid rgb(255, 178,37);">
          <h3 id="lqfb" style="margin-left: 1%;">录取分布</h3>
        </div>
        
        
        <div id="gl" style="height: 300px; background: #fff; width: 100%" v-if="!testUser"></div>
        <span v-else style="text-align: center;">
          <i class="el-icon-warning" style="margin-left: 50%;"></i><p>系统演示用户不展示院校录取数据分布，请使用正式推荐服务。</p>
        </span>
          
    
        <div class="zsinfo" id="zsjh">
          <div style="border-left: 4px solid rgb(255, 178,37);">
            <h3 style="margin-left: 1%; display: block;">招生计划</h3>
            <span style="margin-left: 1%;">推荐专业</span>
            <el-tag
              style="cursor: pointer;"
              v-for="item in recommendMajor"
              :key="item.zydm"
              v-model="searchTag"
              @click="searchByTag(item)"
            >{{item.zymc}}</el-tag>&nbsp;&nbsp;
            <el-button type="text" @click="resetZsInfo">重置</el-button>
          </div>
          <el-table
            border
            :data="zsInfoData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            style="width: 80%;margin-left:5%"
          >
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="yzmc" label="语种" width="100"></el-table-column>
            <el-table-column prop="klmc" label="科类" width="100"></el-table-column>
            <el-table-column prop="zydh" label="专业代号" width="100"></el-table-column>
            <el-table-column prop="zymc" label="专业名称" width="200"></el-table-column>
            <el-table-column prop="jhxzmc" label="计划性质" width="100"></el-table-column>
            <el-table-column prop="pcmc" label="批次名称" width="150"></el-table-column>
            <el-table-column label="学制" width="100">
              <template slot-scope="scope">{{scope.row.xzdm}}年</template>
            </el-table-column>
            <el-table-column prop="sfbz" label="学费" width="100"></el-table-column>
            <el-table-column prop="zsjhs" label="招生数" width="100"></el-table-column>
            <el-table-column prop="zyDes" label="专业说明"></el-table-column>
          </el-table>
          <div style="text-align: center;margin-top: 30px;">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              @current-change="current_change"
            ></el-pagination>
          </div>
        </div>
        <!-- 由于数据问题暂时不用 2019-04-18 -->
        <!--        <div id="kscj" style="height: 600px;">-->
        <!--          <h3>考生成绩</h3>-->
        <!--          <el-row>-->
        <!--            <el-col :span="8">-->
        <!--              <el-select v-model="kscjYear" placeholder="Select" @change="changeYear">-->
        <!--                <el-option-->
        <!--                  v-for="item in kscjOptions"-->
        <!--                  :key="item.value"-->
        <!--                  :label="item.label"-->
        <!--                  :value="item.value"-->
        <!--                  >-->
        <!--                </el-option>-->
        <!--              </el-select>-->
        <!--            </el-col>-->
        <!--            <el-col :span="8">-->
        <!--              <el-select v-model="kscjLanguage" @change="changeLanguage">-->
        <!--                <el-option-->
        <!--                  v-for="item in languageList"-->
        <!--                  :key="item.value"-->
        <!--                  :label="item.label"-->
        <!--                  :value="item.value">-->
        <!--                </el-option>-->
        <!--              </el-select>-->
        <!--            </el-col>-->
        <!--            <el-col :span="8">-->
        <!--              <el-select v-model="kscjCategory" @change="changeCategory">-->
        <!--                <el-option-->
        <!--                  v-for="item in categoryList"-->
        <!--                  :key="item.value"-->
        <!--                  :label="item.label"-->
        <!--                  :value="item.value">-->
        <!--                </el-option>-->
        <!--              </el-select>-->
        <!--            </el-col>-->
        <!--          </el-row>-->
        <!--          <el-row>-->
        <!--            <div id="kscjChart" style="height: 600px; width: 100%;"></div>-->
        <!--          </el-row>-->
        <!--        </div>-->
        <div id="yxPinggu" v-if="yxPinggu">
          <h3>优势学科</h3>
          <p>依据2017年12月第四次全国高校学科评估结果</p>
          <el-table :data="yxPingguData" style="width: 80%;margin-left:5%">
            <el-table-column prop="xkmc" label="学科名称" width="180"></el-table-column>
            <el-table-column prop="xkdm" label="学科代码" width="180"></el-table-column>
            <el-table-column prop="xkml" label="学科门类"></el-table-column>
            <el-table-column prop="mldm" label="门类代码"></el-table-column>
            <el-table-column prop="pgjg" label="评估结果"></el-table-column>
            <el-table-column prop="pgmc" label="评估名次"></el-table-column>
            <el-table-column prop="pgdc" label="评估档次"></el-table-column>
            <el-table-column label="是否为一流学科">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.ylxk === 0" type="danger">否</el-tag>
                <el-tag v-else type="success">是</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="cpzs" label="该学科参评总数"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import api from "../../utils/api";
import { hexToRgb } from "../../utils/utils";
import { color2 } from "../../constants/constants";
import { languageList, categoryList } from "../../constants/constants";

export default {
  data() {
    return {
      testUser: false,
      searchTag: "",
      lqPercentage: (
        JSON.parse(localStorage.getItem("recommendParam")).gl * 100
      ).toFixed(2),
      recommendMajor: JSON.parse(localStorage.getItem("recommendParam")).zy,
      chart: null,
      zsInfoData: [],
      tmpZsInfoData: [],
      total: 0,
      pagesize: 10,
      currentPage: 1,
      colleageName: "",
      kscjOptions: [
        {
          value: "2015",
          label: "2015"
        },
        {
          value: "2016",
          label: "2016"
        },
        {
          value: "2017",
          label: "2017"
        }
      ],
      languageList: languageList,
      categoryList: categoryList,
      kscjYear: "",
      kscjLanguage: "",
      kscjCategory: "",
      yxPingguData: [],
      colleageAvatar: "",
      yxPinggu: false
    };
  },
  mounted() {
    this.initChart();
    this.initZsInfo();
    this.initYxPinggu()
    this.userInfo = JSON.parse(localStorage.getItem("user"));

    if (localStorage.getItem("testuser")) {
      this.testUser = true;
    } else {
      this.testUser = false;
    }
    console.log(this.userInfo);
    console.log(JSON.parse(localStorage.getItem("recommendParam")));
    // this.initKscjChart()
  },
  components: {},
  methods: {
    resetZsInfo() {
      this.zsInfoData = this.tmpZsInfoData;
      this.total = this.zsInfoData.length;
    },
    searchByTag(item) {
      this.zsInfoData = this.tmpZsInfoData.filter(
        data => data.zydm === item.zydm
      );
      this.total = this.zsInfoData.length;
    },
    back() {
      this.$router.go(-1) //返回上一层
    },
    initYxPinggu() {
      api({
        url: "/nceeSysMgr/rest/sendGet/analysis/rest/getYXPingGuInfo",
        method: "get",
        params: {
          yxdm: Number(JSON.parse(localStorage.getItem("recommendParam")).yxdm)
        }
      }).then(res => {
        if (res.status === 200 && res.data.length > 0) {
          this.yxPingguData = res.data;
          this.yxPinggu = true;
        }
      });
    },
    changeYear() {
      this.initKscjChart(this.kscjYear, this.kscjLanguage, this.kscjCategory);
    },
    changeLanguage() {
      this.initKscjChart(this.kscjYear, this.kscjLanguage, this.kscjCategory);
    },
    changeCategory() {
      this.initKscjChart(this.kscjYear, this.kscjLanguage, this.kscjCategory);
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("gl"));
      var option = null;
      var series = [];
      var max = 0;
      var td = 100;
      var itv = {};
      var pcname = "";
      if (
        JSON.parse(localStorage.getItem("recommendParam")).pcdm == 1 ||
        JSON.parse(localStorage.getItem("recommendParam")).pcdm == 2
      )
        pcname =
          "本科" +
          JSON.parse(localStorage.getItem("recommendParam")).pcdm +
          "批次";
      else if (JSON.parse(localStorage.getItem("recommendParam")).pcdm == 5)
        pcname = "专科层次";
      const estimateParam = JSON.parse(localStorage.getItem("estimateparam"));
      const params = {
        userId: estimateParam.userId,
        yzmc: estimateParam.yzmc,
        kldm: estimateParam.kldm,
        pcdm: JSON.parse(localStorage.getItem("recommendParam")).pcdm,
        yxdm: JSON.parse(localStorage.getItem("recommendParam")).yxdm,
        userRank: estimateParam.px,
        zyList: estimateParam.zyList,
        hpx: localStorage.getItem("hpx")
      };
      api({
        url: "/nceeSysMgr/rest/sendPost/analysis/rest/getYXLQAndUserRank",
        method: "post",
        data: params
      }).then(res => {
        console.log(res);
        var data = res.data;
        this.colleageName = data.yxmc;
        this.colleageAvatar =
          "http://222.82.250.217:81/nceeSysMgr/xiaohui/" + data.yxmc + ".jpg";
        var cc = 0;
        var zys = data.allZyLqfb;
        var tmpObj = getArr(data.allYearfb.lqfb);
        var maxY = getMax(data.allYearfb.lqfb);
        itv["全专业排名"] = data.allYearfb.interval;
        td = data.allYearfb.interval;
        series.push({
          name: "全专业排名",
          type: "line",
          smooth: true,
          symbol: "circle",
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {
            normal: {
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(" + hexToRgb(color2[cc]) + ", 0.6)"
                  },
                  {
                    offset: 0.8,
                    color: "rgba(" + hexToRgb(color2[cc]) + ", 0.2)"
                  }
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10
            }
          },
          itemStyle: {
            normal: {
              color: "rgb(" + hexToRgb(color2[cc]) + ")",
              borderColor: "rgba(" + hexToRgb(color2[cc]) + ",0.2)",
              borderWidth: 12
            }
          },
          data: tmpObj
        });
        cc++;
        var lgData = [];
        lgData.push("全专业排名");
        for (var k in zys) {
          lgData.push(zys[k].name);
          var zData = getArr(zys[k].lqfb);
          itv[zys[k].name] = zys[k].interval;
          series.push({
            name: zys[k].name,
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(" + hexToRgb(color2[cc]) + ", 0.6)"
                    },
                    {
                      offset: 0.8,
                      color: "rgba(" + hexToRgb(color2[cc]) + ", 0.2)"
                    }
                  ],
                  false
                ),
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: "rgb(" + hexToRgb(color2[cc]) + ")",
                borderColor: "rgba(" + hexToRgb(color2[cc]) + ",0.2)",
                borderWidth: 12
              }
            },
            data: zData
          });
          cc++;
        }
        series.push({
          name: "当前名次",
          type: "effectScatter",
          data: [[parseInt(data["userRank"]), 1]],
          label: {
            normal: {
              show: true,
              formatter: function(param) {
                return "我的名次:" + data["userRank"];
              },
              position: "top",
              offset: [0, -15],
              textStyle: {
                fontWeight: "bolder",
                fontSize: 16
              }
            }
          }
        });
        max = max > data["userRank"] ? max : data["userRank"];
        option = {
          title: {
            left: "center",
            text: data["yxmc"] + "历年录取考生名次分布图——" + pcname
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              lineStyle: {
                color: "#57617B"
              }
            },
            formatter: function(params) {
              //console.log(params);
              var str = "";
              var arr = [];
              arr = params;
              for (var i = 0; i < arr.length; i++) {
                var obj = arr[i];
                if (i == 0 && obj["seriesType"] == "effectScatter") {
                  break;
                } else if (i == 0 && obj["value"][1] > 0) {
                  var fb = obj["axisValue"];
                  if (fb == 0) str = "名次：1-" + (fb + td) + "<br/>";
                  else str = "名次：" + fb + "-" + (fb + td) + "<br/>";
                  str += "录取" + obj["value"][1] + "人<br/>";
                }
              }
              return str;
            }
          },
          legend: {
            data: lgData,
            selectedMode: "single",
            bottom: "8%"
          },
          grid: {
            left: "5%",
            right: "5%",
            bottom: "15%",
            containLabel: true
          },
          xAxis: {
            type: "value",
            name: "",
            nameLocation: "middle",
            nameGap: 25,
            nameTextStyle: {
              fontWeight: "bolder",
              fontSize: 16
            },
            max: "dataMax",
            min: "dataMin",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "#57617B"
              }
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: "value",
            name: "招生数",
            nameTextStyle: {
              fontWeight: "bolder",
              fontSize: 16
            },
            min: 0,
            max: "dataMax",
            minInterval: 1,
            interval: maxY < 20 ? 1 : maxY < 50 ? 5 : maxY < 100 ? 10 : 20,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#57617B"
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: "#57617B"
              }
            }
          },
          series: series
        };
        myChart.setOption(option);
      });
      myChart.on("legendselectchanged", function(params) {
        console.log(params.name, " legend changed ");
        td = itv[params.name];
        option.tooltip.formatter = function(params) {
          var str = "";
          var arr = [];
          arr = params;
          for (i = 0; i < arr.length; i++) {
            var obj = arr[i];
            if (i == 0 && obj["seriesType"] == "effectScatter") {
              break;
            } else if (i == 0 && obj["value"][1] > 0) {
              var fb = obj["axisValue"];
              if (fb == 0) str = "名次：1-" + (fb + td) + "<br/>";
              else str = "名次：" + fb + "-" + (fb + td) + "<br/>";
              str += "录取" + obj["value"][1] + "人<br/>";
            }
          }
          return str;
        };
        myChart.setOption(option);
      });
      function getArr(obj) {
        var ro = [];
        var st = [];
        for (var key in obj) {
          var k = parseInt(key);
          if (max < k) max = k;
          st.push(k);
          //ro.push([k, obj[key]]);
        }
        st.sort(function(a, b) {
          return a - b;
        });
        for (var i = 0; i < st.length; i++) {
          ro.push([st[i], obj[st[i].toString()]]);
        }
        //console.log(ro);
        return ro;
      }

      function getMax(obj) {
        var ro = [];
        var st = [];
        for (var key in obj) {
          var k = parseInt(obj[key]);
          if (max < k) max = k;
          st.push(k);
          //ro.push([k, obj[key]]);
        }
        st.sort(function(a, b) {
          return a - b;
        });
        //console.log(ro);
        return st[st.length - 1];
      }
    },
    initZsInfo() {
      api({
        url: "/nceeSysMgr/rest/sendGet/analysis/rest/getYxJh",
        method: "get",
        params: {
          yxdm: JSON.parse(localStorage.getItem("recommendParam")).yxdm
        }
      }).then(res => {
        this.total = res.data.length;
        this.zsInfoData = res.status === 200 ? res.data : "";
        this.tmpZsInfoData = res.status === 200 ? res.data : "";
        console.log(this.zsInfoData, " ----------- zs info data");
      });
    },
    initKscjChart(kscjYear, kscjLanguage, kscjCategory) {
      var myChart = this.$echarts.init(document.getElementById("kscjChart"));

      if (kscjYear === "" && kscjLanguage === "" && kscjCategory === "") {
        var param = {
          yxId: this.$route.params.yxdm
        };
      } else {
        var param = {
          yxId: this.$route.params.yxdm,
          yzmc: kscjLanguage,
          kldm: kscjCategory,
          year: kscjYear
        };
      }

      api({
        url: "/nceeSysMgr/rest/sendGet/analysis/rest/getKsScore",
        method: "get",
        params: param
      }).then(res => {
        if (res.status === 200) {
          kscjYear = this.kscjYear = res.data.year;
          kscjLanguage = this.kscjLanguage = res.data.yzmc;
          kscjCategory = this.kscjCategory = res.data.kldm;
        }
        var dataList = new Array();
        var keyList = new Array();
        var count = 0;
        var d = res.data.data;
        for (var key in d) {
          var data = {};
          data["name"] = key;
          data["value"] = d[key];
          console.log(key);
          dataList.push(data);
          keyList.push(key);
          count += d[key];
        }
        var option = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: "vertical",
            x: "left",
            data: keyList
          },
          title: [
            {
              text: count > 0 ? "总人数" : "没有招生记录",
              x: "center",
              left: "50%",
              top: "40%",
              textAlign: "center",
              textBaseline: "middle",
              textStyle: {
                color: "#555",
                fontWeight: "bold",
                fontSize: 20
              }
            },
            {
              text: count > 0 ? count : "",
              x: "center",
              left: "50%",
              top: "50%",
              textAlign: "center",
              textBaseline: "middle",
              textStyle: {
                color: "#ff6702",
                fontWeight: "normal",
                fontSize: 28
              }
            }
          ],
          series: [
            {
              name: "分数分段",
              type: "pie",
              radius: ["42%", "55%"],
              labelLine: {
                normal: {
                  length: 30,
                  length2: 10,
                  lineStyle: {
                    width: 2
                  }
                }
              },
              label: {
                normal: {
                  textStyle: {
                    fontSize: 28
                  },
                  formatter: "{b}\n{d}%"
                }
              },
              data: dataList
            }
          ]
        };
        myChart.setOption(option);
      });
    },
    current_change: function(currentPage) {
      this.currentPage = currentPage;
    }
  },
  watch: {
    zsInfoData() {}
  }
};
</script>
<style scoped>
.gdap-colleage-avatar {
  text-align: center;
}
.gdap-colleage-avatar-img {
  width: 60%;
  margin-top: 3vh;
}

.el-progress {
  width: 80%;
  float: left;
  margin: -1em 9em;
}
.el-progress-bar__inner {
  background-color: transparent;
  background-image: -webkit-linear-gradient(left, #f36d6d, #5ee9a6);
  background-image: -moz-linear-gradient(left, #f36d6d, #5ee9a6);
  background-image: -o-linear-gradient(left, #f36d6d, #5ee9a6);
  background-image: -ms-linear-gradient(left, #f36d6d, #5ee9a6);
  background-image: linear-gradient(left, #f36d6d, #5ee9a6);
}
.el-progress-bar__inner:after {
  background-color: transparent;
  background-image: -webkit-linear-gradient(top, #f36d6d, #5ee9a6);
  background-image: -moz-linear-gradient(top, #f36d6d, #5ee9a6);
  background-image: -o-linear-gradient(top, #f36d6d, #5ee9a6);
  background-image: -ms-linear-gradient(top, #f36d6d, #5ee9a6);
  background-image: linear-gradient(top, #f36d6d, #5ee9a6);
}
.testuser-content {
  text-align: center;
}
</style>
